import { UploadOutlined } from "@ant-design/icons";
import ProForm, { DrawerForm, ProFormDatePicker, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { Button, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const columns_2:ProColumns[] = [
    {
      title:'规格型号',
      dataIndex: 'name',
      ellipsis:true,
      renderText:()=>'IS3000'
    },
    {
      title:'存货名称',
      dataIndex: 'name1',
      ellipsis:true,
      renderText:()=>'---'
    },
    {
      title:'数量',
      dataIndex: 'name2',
      ellipsis:true,
      renderText:()=>'100'
    },
  ]

  const columns:ProColumns[] = [
    {
      title:'预测名称',
      dataIndex: 'name',
      width:150,
      ellipsis:true,
      renderText:()=>'张三的预测上报'
    },
    {
      title:'客户名称',
      ellipsis:true,
      dataIndex: 'name1',
      renderText:()=>'XXXX人民医院'
    },
    {
      title:'姓名',
      dataIndex: 'name2',
      hideInSearch:true,
      renderText:()=>'李四'
    },
    {
      title:'截止日期',
      dataIndex: 'name3',
      hideInSearch:true,
      renderText:()=>'2022-12-31'
    },
    {
      title:'年份',
      hideInSearch:true,
      dataIndex: 'name4',     
      renderText:()=>'2022-12-18'
    },
    {
      title:'销售预测日期',
      hideInSearch:true,
      dataIndex: 'name7',
      renderText:()=>'2022-12-30'
    },
    {
      title:'业务员',
      dataIndex: 'name73',
      hideInSearch:true,
      renderText:()=>'王五'
    },
    {
      title:'创建日期',
      dataIndex: 'name7in8',
      hideInSearch:true,
      renderText:()=>'2022-12-11'
    },
    {
      title: "操作",
      fixed:'right',
      valueType: 'option',
      width:100,
      render: (text, record:any,_, action) => [
        <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={[{}]}
      scroll={{x:1500}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        menu: {
          type: 'tab',
          activeKey: activeKey,
          items: [
            {
              key: 'tab1',
              label: <span>全部</span>,
            },
            {
              key: 'tab2',
              label: <span>我负责的</span>,
            },
            {
              key: 'tab5',
              label: <span>我参与的</span>,
            }
          ],
          onChange: (key) => {
            setActiveKey(key as string);
          },
        },
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <ProFormGroup>
            <ProFormSelect name="name61" width={'md'} label="关联报价单"  options={[{label:'报价单A',value:'0'},{label:'报价单B',value:'1'}]} />
            <ProFormText name="name" width={'md'} label="销售预测上报名称" rules={[{ required: true}]}/>
          </ProFormGroup>
          <ProFormGroup>
              <ProFormText name="name2" width={'sm'} disabled label="客户名称" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
          </ProFormGroup>
          <ProFormGroup>
              <ProFormText name="name2" width={'sm'} disabled label="姓名" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
          </ProFormGroup>
          <ProFormGroup>
             <ProFormSelect name="year" width={'md'} label="年份"  options={[{label:'2022',value:'0'},{label:'2023',value:'1'}]} />
            <ProFormDatePicker name="name5" width={'md'} label="预测日期" />
          </ProFormGroup>
          <ProFormGroup>
              <ProFormText name="name2" width={'sm'} disabled label="业务员" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
          </ProFormGroup>
          <ProFormGroup>
              <ProFormText name="name3" width={'sm'} disabled label="所有人" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
            <ProFormSelect name="name8" width={'md'} label="所属部门" options={[{label:'销售部',value:'0'},{label:'管理部',value:'1'}]} />
          </ProFormGroup>

          
          <ProFormTextArea name="name12" width={'xl'} label="备注" />
          <ProTable dataSource={[{}]}  style={{marginLeft:-20,marginBottom:20}} toolBarRender={() => [
            <Button
              type="primary"
              key="primary"
              onClick={() => {
              
              }}
            >添加
            </Button>,
          ]}
          toolbar={{settings:[]}}search={false} pagination={false} size='small'  id={'id'}
                    columns={columns_2}/>

          <div style={{height:20}}></div>
        
      </DrawerForm>
    </PageContainer>)
}